<template>
	<view class="container">
		<div class="tobg">
			<image src="/static/img/agent/addbg.png" mode=""></image>
		</div>
		
		<div class="addform">
			<div class="tip">
				<p>{{title}}<span style="font-size:12px; color: #B0B0B0; padding-left: 8px;">(带*为必填项)</span></p>
			</div>
			<view class="list-item">
				<div class="item-equip">
					<u-field
						v-model="deviceIds"
						label="选择设备"
						required
						right-icon="arrow-right"
						@click="chooseEquip"
						placeholder="请选择设备">
					</u-field>
					<div class="sblist">
						<div class="sbitem" v-for="(item, index) in deviceList" :key="index">
							<p>{{item.text}}</p>
							<image src="/static/img/agent/guanbi.png" mode="" @click="deleteDeve(index)"></image>
						</div>
					</div>
				</div>
				<u-field
					v-model="mobile"
					label="手机号"
					required
					placeholder="请输入手机号">
				</u-field>
				<u-field
					v-model="nickname"
					label="账户昵称"
					required
					placeholder="请输入账户昵称">
				</u-field>
				<u-field
					password
					required
					v-model="password"
					label="登录密码"
					placeholder="请输入登录密码">
				</u-field>
				<u-field
					v-model="remark"
					label="备注"
					required
					placeholder="请输入备注内容">
				</u-field>
			</view>
		</div>

		<view class="btn">
			<button type="default" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import { addOperate, getOperate, saveOperate, getDeviceList } from '../../../api/api.js'
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				deviceIds: '',
				nickname: '',
				remark: '',
				deviceList: [],
				deviceIdsArr: [],
				title: '',
				operType: '',
				operId: ''
			}
		},
		onLoad(options) {
			if (options.devlist && options.ids) {
				this.deviceList = JSON.parse(options.devlist);
				this.deviceIds = String(JSON.parse(options.ids));
			}
			const oId = uni.getStorageSync('operateId');
			// console.log(oId, 'oId');
			if(oId) {
				this.operId = oId;
				this.title = '员工修改';
				this.operType = 'edit';
				this.getOperateDetail(oId);
			} else {
				this.title = '员工添加';
				this.operType = 'add';
				this.mobile = '';
				this.nickname = '';
				this.remark = '';
			}
		},
		methods: {
			getMyDevice() {
				getDeviceList({}).then(res => {
					if(res.code == 1) {
						res.data.map(item => {
							if(this.deviceIdsArr.includes(String(item.device_id))) {
								// console.log(item, 'eeewwwww');
								this.deviceList.push({
									value: item.device_id,
									text: item.name
								})
							}
						})
					}
				})
			},
			getOperateDetail(id) {
				getOperate({
					id: id
				}).then(res=>{
					if(res.code == 1){
						console.log(res.data,'dddaaa');
						this.nickname = res.data.nickname;
						this.mobile = res.data.mobile;
						this.remark = res.data.remark;
						this.deviceIdsArr = res.data.device_id.split(',');
						console.log(this.deviceIdsArr, 'this.deviceIdsArr')
						this.getMyDevice();
					}
				})
			},
			chooseEquip() {
				uni.navigateTo({
					url:'./chooseEquip'
				})
			},
			deleteDeve(index) {
				this.deviceList.splice(index, 1);
			},
			submit() {
				let reg = /^1[3|4|5|7|8|9][0-9]{9}$/;
				if (!reg.test(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return
				}
				if (this.operType === 'add') {
					if (!this.password) {
						uni.showToast({
							icon: 'none',
							title: '请输入密码'
						})
						return
					}
					addOperate({
						mobile: this.mobile,
						device_ids: this.deviceIds,
						nickname: this.nickname,
						password: this.password,
						remark: this.remark
					}).then(res=>{
						if(res.code == 1){
							// let pages = getCurrentPages();
							// let nowPage = pages[pages.length - 1];
							// let prevPage = pages[pages.length - 2];
							// prevPage.page = 1;
							// prevPage.loadData('refresh');
							uni.navigateTo({
								url:'/pages/agent/user/operate-manage'
							})
						}
					})
				} else if(this.operType === 'edit'){
					saveOperate({
						id: this.operId,
						mobile: this.mobile,
						device_ids: this.deviceIds,
						nickname: this.nickname,
						password: this.password,
						remark: this.remark
					}).then(res=>{
						if(res.code == 1){
							uni.removeStorage({
								key:'operateId'
							})
							uni.navigateTo({
								url:'/pages/agent/user/operate-manage'
							})
						}
					})
				}
			}
		},
		destroyed() {
			uni.removeStorage({
				key:'operateId'
			})
		}
	}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	.tobg{
		width: 100%;
		height: 204px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.addform{
		width: 85%;
		background: url('../../../static/img/agent/formbg.png') no-repeat center;
		background-size: 100% 100%;
		position: absolute;
		top: 20px;
		left: calc((15% - 52px) / 2);
		padding: 26px;
		.tip{
			padding: 10px 0;
			p{
				font-weight: 500;
				font-size: 17px;
				color: #000000;
				line-height: 24px
			}
		}
		.u-field{
			margin-bottom: 15px;
		}
		.sblist{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 8px;
			.sbitem{
				width: 94px;
				height: 30px;
				border-radius: 4px;
				border: 1px solid #49A1FD;
				text-align: center;
				line-height: 30px;
				font-weight: 400;
				font-size: 11px;
				color: #05A3FF;
				position: relative;
				margin-right: 10px;
				image{
					width: 16px;
					height: 16px;
					position: absolute;
					top: -5px;
					right: -5px;
				}
			}
		}
		
	}
	.btn {
		width: calc(100% - 60upx);
		margin: 40upx auto;
		height: 90upx;
		position: fixed;
		left: 15px;
		bottom: 100px;
		button {
			width: 100%;
			height: 100%;
			height: 90upx;
			background: linear-gradient( 311deg, #93A4FB 0%, #2F9AFE 100%);
			box-shadow: 0px 2px 6px 0px rgba(20,135,255,0.4);
			border-radius: 22px;
			color: #FFFFFF;
		}
	}
}
</style>
